<script setup lang="ts">
// 引用其他vue对象文件
// import DeviceCheck from "./components/DeviceCheck.vue";
import { httpGet } from "../http/httpRequestUtils";
import * as HttpPath from "../http/httpPath";
import { onMounted, onUpdated, ref } from "vue";
import {
  saveString,
  getString,
  STORAGE_KEY_USER_INFO,
} from "../storage/storage";
// 导入路由
import {
  isNavigationFailure,
  NavigationFailureType,
  useRoute,
  useRouter,
} from "vue-router";
const router = useRouter();
const route = useRoute();

const screenWidth = ref(
  window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth
);
const screenHeight = ref(
  window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight
);

onMounted(() => {
  console.log("生命周期--onMounted(App.vue)");
  // 注册窗口大小变化
  // window.onresize = () => {
  //   return (() => {
  //     // 当手机/平板触发窗口变化时，这里会收到回调，并监听到变化后的窗口大小，
  //     // 如果没有使用 @media 方式让 css 样式生效的方式处理，则需要在监听到窗口大小变化时，重新绘制页面时
  //     console.log(
  //       "窗口大小变化监听【变化--前】<-->" +
  //         screenWidth.value +
  //         "<-->" +
  //         screenHeight.value +
  //         "<-->"
  //     );
  //     screenWidth.value =
  //       window.innerWidth ||
  //       document.documentElement.clientWidth ||
  //       document.body.clientWidth;
  //     screenHeight.value =
  //       window.innerHeight ||
  //       document.documentElement.clientHeight ||
  //       document.body.clientHeight;
  //     console.log(
  //       "窗口大小变化监听【变化--后】<-->" +
  //         screenWidth.value +
  //         "<-->" +
  //         screenHeight.value +
  //         "<-->"
  //     );
  //   })();
  // };
});

onUpdated(() => {
  console.log("生命周期--onUpdated(App.vue)");
});

async function requestGet() {
  const result = await httpGet(HttpPath.VERSION, true);
  console.log("请求结果:" + result + "<-->");
}
function getStorage() {
  const beanStr = getString(STORAGE_KEY_USER_INFO);
  console.log("获取存储1:" + beanStr + "<-->");
  if (beanStr && beanStr.length > 0) {
    const bean = JSON.parse(beanStr);
    console.log("获取存储2:" + bean.key + "<-->");
    console.log("获取存储3:" + bean.key2 + "<-->");
  }
}
function setStorage() {
  saveString(STORAGE_KEY_USER_INFO, '{"key":"value","key2":20}');
  console.log("执行存储<-->");
}
// 参考 https://cloud.tencent.com/developer/article/2340524 下方的路由跳转
async function toPage2() {
  console.log("Current<-->" + route.path + "<-->" + route.fullPath + "<-->");
  // 1、方式1，实际测试发现无效(通过console.log发现路由地址确实变了，但界面显示没有变化) -----------------------------------------------------
  // 试图离开未保存的编辑文本界面
  const failure = await router.push("/home");
  if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
    // 给用户显示一个小通知
    console.log(
      "You have unsaved changes, discard and leave anyway?" + failure
    );
  }
  // 2、方式2，打开了新的标签页，但页面样式没有变化 -----------------------------------------------------
  // const routerData = router.resolve({
  //   path: "/home",
  // });
  // window.open(routerData.href, "_blank"); // 打开新的标签页，成功，但页面显示并没有变化
  // console.log("跳转<-->");
}
</script>
<!-- template 加载前，隐藏内容 -->
<template>
  <main>
    <div class="app-root">
      <button class="app-label" @click="requestGet()">执行get</button>
      <button class="app-label1" @click="getStorage()">执行getStorage</button>
      <button class="app-label2" @click="setStorage()">执行setStorage</button>
    </div>
  </main>
</template>

<style scoped>
.app-root {
  width: 100vw;
  height: 100vh;
  background-color: aliceblue;
  display: flex;
  flex-direction: column;
}
.app-label {
  width: 400px;
  height: auto;
  color: #333333;
  font-size: 16px;
  font-weight: 400;
  background-color: aqua;
}
.app-label1 {
  width: 400px;
  height: auto;
  color: #333333;
  font-size: 16px;
  font-weight: 400;
  background-color: aliceblue;
}
.app-label2 {
  width: 400px;
  height: auto;
  color: #333333;
  font-size: 16px;
  font-weight: 400;
  background-color: antiquewhite;
}
</style>
